<script setup lang="ts">
    import {NConfigProvider,NPopover,NButton,NAvatar} from 'naive-ui'
    import { computed, ref, watch,onMounted,onBeforeMount } from 'vue'
    import {NaiveProvider} from '@/components/common'
    import {useTheme} from '@/hooks/useTheme'
    import {useLanguage} from '@/hooks/useLanguage'
    import {useBasicLayout} from '@/hooks/useBasicLayout'
    import { useAppStore, useChatStore } from '@/store'
    import type { Theme } from '@/store/modules/app/helper'
    import { SvgIcon } from '@/components/common'
    import { indexMenu } from '@/components/common'
    import { useUserStore } from '@/store'
    import defaultAvatar from '@/assets/avatar.jpg'
    import { isString } from '@/utils/is'
    import {UserInfo} from "@/typings/user"
    import {getUserInfo} from "@/api/user"
    import { useRouter,useRoute } from 'vue-router'
    import {userCenter} from '@/components/common'
    import {tradeCenter} from '@/components/common'

    const {theme, themeOverrides} = useTheme()
    const {language} = useLanguage()
    const {isMobile} = useBasicLayout()

    const appStore = useAppStore()

    const userStore = useUserStore()

    const userInfo = ref(computed(() => userStore.userInfo))
    const router = useRouter()
    const route = useRoute()
    function getStyle() {
        if (isMobile) {
            return "position:absolute;top:110%;text-align:center;bottom:0;margin:0 auto;width:100%;color: #5c6b77"
        }
        return "position:absolute;top:100%;text-align:center;bottom:0;margin:0 auto;width:100%;color: #5c6b77"
    }

    const routeName = ref(route.name)

    const showUserInfo = ref<boolean>(false)
    async function showUserCenter() {
        if (userInfo.value && userInfo.value.id) {
            let newUserInfo = await getUserInfo<UserInfo>()
            if (newUserInfo && newUserInfo.id) {
                userStore.updateUserInfo(newUserInfo)
                showUserInfo.value = true
            }else{
                alert("登陆失效！ 请重新登陆")
                router.push('/Login')
            }
        } else {
            router.push('/Login')
        }
    }

    const showTradeCenter = ref<boolean>(false)


    const activeIndex = ref(0)
    function handleButtonClick(index) {
        activeIndex.value = index;
        if(index==0){
            if(route.name !=='Chat'){
                router.push('/chat')
            }
        }else if(index==1){
            showTradeCenter.value = true

        }else if(index==2){
            if(route.name !=='Draw'){
                router.push('/draw')
            }
        }else if(index==3){
            router.push('/chat')
        }else{
            router.push('/')
        }
    }

    onMounted(()=>{
        if(route.name =='Chat'){
            activeIndex.value = 0
        }else if(route.name =='aide'){
            activeIndex.value = 1
        }else if(route.name =='Draw'){
            activeIndex.value = 2
        }
    })

</script>

<template>
	<footer v-if=" isMobile && routeName != 'chatRoot'  " class="bg-white dark:bg-[#25272c]">
		<div class="grid border-t py-2 dark:border-t-neutral-800 grid-cols-2" style="grid-template-columns: repeat(5, minmax(0px, 1fr));">

			<span  :class="activeIndex === 0 ? 'text-[#4b9e5f] dark:text-[#86dfba] cursor-pointer text-center leading-4' : 'text-slate-500 cursor-pointer text-center leading-4'" @click="handleButtonClick(0)">
						<span class="inline-block text-xl">
								<SvgIcon icon="basil:chat-solid" width="28" height="28" />
						</span>
				<p>AI聊天</p>
			</span>

			<span  :class="activeIndex === 2 ? 'text-[#4b9e5f] dark:text-[#86dfba] cursor-pointer text-center leading-4' : 'text-slate-500 cursor-pointer text-center leading-4'" @click="handleButtonClick(2)">
						<span class="inline-block text-xl">
							<SvgIcon icon="fluent:draw-image-24-filled" width="28" height="28" />
						</span>
				<p>AI绘画</p>
			</span>
			<span href="/" :class="activeIndex === 3 ? 'text-[#4b9e5f] dark:text-[#86dfba] cursor-pointer text-center leading-4' : 'text-slate-500 cursor-pointer text-center leading-4'" @click="handleButtonClick(3)">
						<span class="inline-block text-xl">
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="mb-2 inline-block text-lg iconify iconify--icon-park-outline" width="1em" height="1em" viewBox="0 0 48 48">
								<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M26 24h16M26 38h16M26 10h16M18 24H6h4m8 14c-6-2-2-14-8-14m8-14c-6 2-2 14-8 14"></path>
							</svg>
						</span>
				<p>知识库</p>
			</span>

			<span v-if="userInfo && userInfo.id" :class="activeIndex === 1 ? 'text-[#4b9e5f] dark:text-[#86dfba] cursor-pointer text-center leading-4' : 'text-slate-500 cursor-pointer text-center leading-4'" @click="handleButtonClick(1)">
						<span class="inline-block text-xl">
							<SvgIcon icon="icon-park-solid:tool" width="28" height="28" />
						</span>
				<p>交易中心</p>
			</span>

			<span @click="showUserCenter" class="text-slate-500 cursor-pointer text-center leading-4">
						<span class="inline-block text-xl">
							<SvgIcon icon="carbon:user-filled" width="28" height="28" />
						</span>
				<p>个人中心</p>
			</span>
		</div>
	</footer>
	<userCenter v-model:visible="showUserInfo"  />
	<tradeCenter   v-model:visible="showTradeCenter"  />
</template>
<style>
	.left-div {
		height: 100%;
		width: 70px;
		float: left;
		background-color: #ddd; /* Change this to preferred color */
	}
	.main-content {
		margin-left: 100px;
		height: 100%;
	}
	.container {
		height: 93%;
	  overflow: auto;
	}
</style>
<!--			暂时去掉下方备案-->
<!--<div v-if="false"-->
<!--		 style="position:absolute;top:100%;text-align:center;bottom:0;margin:0 auto;width:100%;color: #999999"-->
<!--&gt;-->
<!--	<br v-if="isMobile">-->
<!--	<br v-if="isMobile">-->
<!--	<img src='http://cdn.beiruijk.com/0be25a8d779aee40433aaca76c5f6ce.jpg'-->
<!--			 style="display: inline-block; vertical-align: middle;"/>-->
<!--	<a-->
<!--		target="_blank"-->
<!--		style="color: #999999;font-size: 14px; display: inline-block; vertical-align: middle;"-->
<!--		href="https://beian.miit.gov.cn/"-->
<!--	> &nbsp;湘ICP备2021013567号-1</a>-->
<!--	<span style="color: #999999;font-size: 14px">&nbsp; @2023 蓝猫AI工作室</span>-->
<!--</div>-->
